<template>
  <!-- <div class="map-head">
    <div class="map-view">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <map-tady />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <map-sales />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div> -->
  <div class="map-view">
    <!-- 左边 -->
    <div class="left-view">
      <el-card shadow="hover">
        <template>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart">
              <div class="chart-title">搜索用户数</div>
              <div class="chart-data">93,634</div>
              <v-chart
                :options="searchUsersOption"
                :style="{
                  width: '100 %',
                  height: '100%',
                }"
              />
            </div>
            <div class="chart">
              <div class="chart-title">搜索量</div>
              <div class="chart-data">198,782</div>
              <v-chart
                :options="searchNumberOption"
                :style="{
                  width: '100 %',
                  height: '50%',
                }"
              />
            </div>
          </div>
          <!-- 内容 -->
          <div class="table-wrapper">
            <!-- 表格 -->
            <el-table :data="tableData">
              <el-table-column
                prop="date"
                label="排名"
                width="150"
              ></el-table-column>
              <el-table-column
                prop="province"
                label="关键词"
                width="150"
              ></el-table-column>
              <el-table-column
                prop="zip"
                label="总搜索量"
                width="150"
              ></el-table-column>
              <el-table-column
                prop="city"
                label="搜索用户数"
                width="150"
              ></el-table-column>
              <el-table-column
                prop="city"
                label="搜索用户数"
                width="150"
              ></el-table-column>
            </el-table>
            <!-- 分页按钮 -->
            <el-pagination
              background
              small
              layout="prev, pager, next"
              :total="100"
            >
            </el-pagination>
          </div>
        </template>
      </el-card>
    </div>
    <!-- 右边 -->
    <div class="right-view">
      <el-card shadow="hover">
        <template>
          <div class="right-view-title">
            <div class="title-wrapper">分类销售排行</div>
            <div class="title-right">
              <el-radio-group v-model="titleview" size="mini">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="title-yuan">
            <v-chart :options="searchChartOption" />
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>
<script>
// import MapTady from '../MapTady/MapTady.vue'
// import MapSales from '../MapSales/MapSales.vue'
export default {
  // components: {
  //   MapTady,
  //   MapSales
  // }
  data () {
    return {
      searchUsersOption: {
        xAxis: {
          type: 'category',
          // 每一个分类的数据
          // 隐藏X轴的数据
          show: false,
          // 图标默认是对两边的轴有间距的 设置为false，可以让间距消失
          boundaryGap: false
        },
        yAxis: {
          // 隐藏Y轴的数据
          show: false,
          min: 0,
          max: 300
        },
        series: [{
          type: 'line',
          // 绘图的数据
          data: [120, 232, 220, 234, 290, 140, 50, 60, 0],
          // 显示面积
          areaStyle: {
            color: '#3298df'
          },
          // 隐藏折线 -- 但是每个峰值的点(item)还在
          // lineStyle: {
          //   width: 0
          // },
          // 隐藏items
          itemStyle: {
            opacity: 0
          },
          // 显示的更平缓
          smooth: true
        }],
        // 调整位置
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: '10px'
        }
      },
      searchNumberOption: {
        xAxis: {
          type: 'category',
          // 每一个分类的数据
          // 隐藏X轴的数据
          show: false,
          // 图标默认是对两边的轴有间距的 设置为false，可以让间距消失
          boundaryGap: false
        },
        yAxis: {
          // 隐藏Y轴的数据
          show: false,
          min: 0,
          max: 300
        },
        series: [{
          type: 'line',
          // 绘图的数据
          data: [220, 132, 120, 264, 230, 100, 50, 70, 0],
          // 显示面积
          areaStyle: {
            color: '#3398db'
          },
          // 隐藏折线 -- 但是每个峰值的点(item)还在
          // lineStyle: {
          //   width: 0
          // },
          // 隐藏items
          itemStyle: {
            opacity: 0
          },
          // 显示的更平缓
          smooth: true
        }],
        // 调整位置
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: '10px'
        }
      },
      tableData: [
        {
          date: '1',
          province: '上海',
          city: '普陀区',
          zip: 200333
        }, {
          date: '2',
          province: '上海',
          city: '普陀区',
          zip: 200333
        }, {
          date: '3',
          province: '上海',
          city: '普陀区',
          zip: 200333
        }, {
          date: '4',
          province: '上海',
          city: '普陀区',
          zip: 200333
        }
      ],
      titleview: '品类',
      searchChartOption: {
        title: [{
          // 主标题
          text: '品类分布',
          textStyle: {
            fontSize: 14,
            color: '#666'
          },
          left: 20,
          top: 20
        },
        // 副标题
        {
          text: '累计订单量',
          subtext: '320',
          x: '39.5%',
          y: '42.5%',
          // 文本样式
          textStyle: {
            fontSize: 14,
            color: '#999'
          },
          subtextStyle: {
            fontSize: 28,
            color: '#333'
          },
          // 文本居中
          textAlign: 'center'
        }
        ],
        tooltip: {
          trigger: 'item'
          // formatter: function (params) {
          //   const str=params.seriesName + '<br/>' + params.marker + params.data.lengendname + '<br/>' + '数量' +
          // }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          top: 'middle',
          left: '70%'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['40%', '50%'],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            // label: {
            //   show: false,
            //   position: 'left'
            // },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 52.36, name: '粉面粥店 | 15.40%' },
              { value: 75.82, name: '简餐便当 | 22.30%' },
              { value: 86.36, name: '汉堡披萨 | 25.40%' }
            ]
          }
        ]
      }
    }
  }

}
</script>
<style  scoped  lang="scss">
// .map-head {
//   margin-top: 20px;
// }
.map-view {
  display: flex;
  margin-top: 10px;

  .left-view {
    width: 49%;
    // height: 500px;

    .title-wrapper {
      box-sizing: border-box;
      font-size: 13px;
      padding: 0 0 10px 0;
      border-bottom: 1px solid rgba(152, 152, 152, 0.356);
    }

    .chart-wrapper {
      display: flex;

      .chart-title {
        padding: 10px 0 0 0;
      }

      //  justify-content: space-between;
      .chart {
        width: 100%;
        font-size: 13px;
        color: rgba(88, 87, 87, 0.837);
      }
    }
  }

  .right-view {
    width: 49%;
    padding-left: 2%;
    // height: 500px;

    .right-view-title {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: right;
      border-bottom: 1px solid rgba(152, 152, 152, 0.356);

      .title-wrapper {
        width: 100%;
        box-sizing: border-box;
        font-size: 15px;
        // padding: 0 0 10px 0;
      }

      .title-right {
        width: 100%;
        padding-left: 350px;
        margin-top: -5px;
      }
    }

    .title-yuan {
      width: 100%;
      height: 366px;
    }
  }
}
</style>
